<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>药植物可视化系统</title>
<!--     最新版本的 Bootstrap 核心 CSS 文件-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--        <link rel = "stylesheet" href="../../static/CSS/min.CSS">-->
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<body>
<div class="container-lg mb-5 pt-4" >
    <h1 align="center">药用植物列表
    </h1>
     <section>
     <ul class="nav nav-pills">
      <li role="presentation" ><a href="http://127.0.0.1:8000/blog/index">首页</a></li>
      <li role="presentation" class="active"><a href="http://127.0.0.1:8000/blog/list">详情</a></li>
      <li role="presentation"><a href="http://127.0.0.1:8000/map/index">展示</a></li>
      <li role="presentation"><a href="http://localhost:8999/#/screen">数据大屏</a></li>
    </ul>
    </section>
<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">搜索 </button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

</div>
    <div table-responsive>
<table class="table table-hover" style="table-layout:auto;white-space:nowrap;overflow:hidden;">

    <tr>
         <th>名称</th>
         <th>类型</th>
         <th>地区</th>
         <th>原产地</th>
         <th>内容</th>
   </tr>
{% for collect in collect_list %}

    <tr>
        <td><a href="/blog/detail/{{collect.id}}">{{collect.name}}</a></td>
    <td>{{collect.type}}</td>
    <td>{{collect.location}}</td>
    <td>{{collect.province}}{{collect.city}}</td>
    <td>{{collect.content}}</td>
    </tr>
{% endfor %}

<!--<td>{{collect.name}}</td>-->
<!--<td>{{collect.name}}</td>-->

</table>
    </div>

</div>
<div>
<nav aria-label="...">
  <ul class="pager">
    <li><a href="/blog/detail/{{previous_collect.id}}">上一页:{{previous_collect.name}}</a></li>
    <li><a href="/blog/detail/{{next_collect.id}}">下一页:{{next_collect.name}}</a></li>
    <li><a href="/blog/index">首页</a></li>
  </ul>
</nav>
</div>
</body>
</html>